<template>
	<div class="container">
		<a href="/" type="button" class="btn btn1 btn-primary">返回首页</a>
		<form class="row">

			<img src="../assets/R-C.jpg" class="col-4">

			<div class="col-8">
				<div class="form-group">
					<label for="exampleInputEmail1">用户id</label>
					<input v-model="user.username" name="username" type="text" class="form-control"
						id="exampleInputEmail1">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">密码</label>
					<input v-model="user.password" name="password" type="password" class="form-control"
						id="exampleInputPassword1">
				</div>
				<button @click="login()" type="button" class="btn2 btn btn-primary">登录</button>
				<button style="margin-left: 40px;" @click="register()" type="button"
					class="btn2 btn btn-primary">注册</button>
			</div>

		</form>
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute,
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const route = useRoute();
			const store = useStore();
			store.state.ifFrameShow = false;
			//onMounted()生命周期
			onMounted(() => {
				// data.user.username = route.params.id
				if (route.params.id == null) {

				} else {
					data.user.username = route.params.id
				}
			});
			const data = reactive({
				imgPath: store.state.imageUrl,
				user: {
					username: '1000000016',
					password: ''
				},
				login: () => {
					axios
						.post("login?username=" + data.user.username + "&password=" + data.user.password)
						.then((response) => {
							if (response.data.code === 0) {
								localStorage.setItem("username", response.data.data.userName)
								localStorage.setItem("userid", response.data.data.userId)
								if (response.data.data.userRole === 'admin') {
									router.push({
										name: 'Admin'
									})
								} else {
									router.push({
										name: 'Main'
									})
								}
							} else {
								data.user.password = ''
								alert("用户名id或密码错误")
							}
						})
						.catch((error) => {
							console.log(error)
							alert("链接失败")
						}); // 请求失败处理
				},
				register: () => {
					router.push({
						name: 'Register'
					})
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>
	.container {}

	.btn1 {
		margin: 10px;
	}

	.btn2 {
		margin-top: 10px;
	}
</style>
